import React, { useState } from 'react';
import './login.css'
import { inject, observer } from "mobx-react";
import * as api from 'api/index'
import classNames from 'classnames';
import { useNavigate } from 'react-router';


function Login({ store }) {
    let [phone, setPhone] = useState('')
    let [smsCode, setsmsCode] = useState('')
    console.log(store.count);
    //验证码
    const validation = () => {
        let params = {
            phone
        }
        api.userGetSmsCode(params).then((res) => {
            setsmsCode(res.result.smsCode)
            console.log(res);
        })
    }
    //登录
    const navigate = useNavigate();
    const loginChange = () => {
        let params = {
            phone,
            smsCode
        }
        api.userLoginBySmsCode(params).then((res) => {
            console.log(999, res);
            store.token = res.result.token;
            localStorage.setItem('token', store.token)
            localStorage.setItem('phone', phone)
            window.history.back()
        })
    }
    return (
        <div className="app">
            <div className="maxbox bg-fff">
                <div className="box1 flex jc-c aic">
                    <input onChange={(event) => { setPhone(event.target.value) }} className="phone" name="phone" type="text" placeholder="请输入手机号码" value={phone} />
                </div>
                <div className="box1 flex jc-c rel">
                    <input onChange={(event) => { setsmsCode(event.target.value) }} className="phone" type="text" name="smsCode" placeholder="请输入验证码" value={smsCode} />
                    <button onClick={validation} className="validation abs">
                        获&nbsp;取&nbsp;验&nbsp;证
                    </button>
                </div>
                <div className="box3 flex jc-sa aic">
                    <button className="left">取消</button>
                    <button onClick={loginChange} className={classNames("right", { background: !!smsCode })}>登录</button>
                </div>
            </div>
        </div>
    );
}

export default inject("store")(observer(Login));
